<!--
  欢迎页面组件
  
  展示应用的欢迎界面，包括Logo、技术栈信息和基本介绍
-->

<template>
  <div class="welcome-page">
    <!-- 应用标题区域 -->
    <div class="hero-section">
      <img alt="Electron logo" class="logo electron" src="../assets/electron.svg" />
      <img alt="Vue logo" class="logo vue" src="../assets/vue.svg" />
      <h1>yuCloudEle</h1>
      <p class="subtitle">基于 Electron + Vue 3 + TypeScript 的桌面应用演示</p>
    </div>

    <!-- 技术栈信息 -->
    <div class="tech-stack">
      <h2>🚀 技术栈</h2>
      <div class="stack-grid">
        <div class="stack-item">
          <span class="stack-icon">⚡</span>
          <div class="stack-info">
            <h3>Electron</h3>
            <p>跨平台桌面应用框架</p>
          </div>
        </div>
        <div class="stack-item">
          <span class="stack-icon">💚</span>
          <div class="stack-info">
            <h3>Vue 3</h3>
            <p>现代化响应式前端框架</p>
          </div>
        </div>
        <div class="stack-item">
          <span class="stack-icon">🔷</span>
          <div class="stack-info">
            <h3>TypeScript</h3>
            <p>类型安全的JavaScript超集</p>
          </div>
        </div>
        <div class="stack-item">
          <span class="stack-icon">⚡</span>
          <div class="stack-info">
            <h3>Vite</h3>
            <p>快速的现代构建工具</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能特色 -->
    <div class="features">
      <h2>✨ 功能特色</h2>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">📁</div>
          <h3>文件管理</h3>
          <p>完整的文件导入、导出和编辑功能演示</p>
          <router-link to="/file-manager" class="feature-link">
            体验功能 →
          </router-link>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🔄</div>
          <h3>IPC通信</h3>
          <p>演示主进程与渲染进程间的各种通信模式</p>
          <router-link to="/ipc-demo" class="feature-link">
            体验功能 →
          </router-link>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">📡</div>
          <h3>通信实战</h3>
          <p>复杂场景下的事件系统和消息传递</p>
          <router-link to="/communication" class="feature-link">
            体验功能 →
          </router-link>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🪟</div>
          <h3>多窗口管理</h3>
          <p>独立子窗口创建和窗口间广播通信</p>
          <router-link to="/multi-window" class="feature-link">
            体验功能 →
          </router-link>
        </div>
      </div>
    </div>

    <!-- 版本信息 -->
    <div class="version-section">
      <Versions />
    </div>

    <!-- 快速操作 -->
    <div class="actions">
      <h2>🎯 快速开始</h2>
      <div class="action-buttons">
        <button @click="handleIPC" class="action-btn primary">
          🔄 测试IPC通信
        </button>
        <button @click="openFileManager" class="action-btn secondary">
          📁 打开文件管理
        </button>
        <button @click="createWindow" class="action-btn success">
          🪟 创建新窗口
        </button>
      </div>
    </div>

    <!-- 文档链接 -->
    <div class="links">
      <h2>📚 相关文档</h2>
      <div class="link-grid">
        <a href="https://electronjs.org/" target="_blank" class="doc-link">
          <span class="link-icon">⚡</span>
          <div class="link-info">
            <h3>Electron 官方文档</h3>
            <p>学习 Electron 开发</p>
          </div>
        </a>
        <a href="https://vuejs.org/" target="_blank" class="doc-link">
          <span class="link-icon">💚</span>
          <div class="link-info">
            <h3>Vue.js 官方文档</h3>
            <p>掌握 Vue 3 新特性</p>
          </div>
        </a>
        <a href="https://www.typescriptlang.org/" target="_blank" class="doc-link">
          <span class="link-icon">🔷</span>
          <div class="link-info">
            <h3>TypeScript 文档</h3>
            <p>类型安全编程指南</p>
          </div>
        </a>
        <a href="https://vitejs.dev/" target="_blank" class="doc-link">
          <span class="link-icon">⚡</span>
          <div class="link-info">
            <h3>Vite 官方文档</h3>
            <p>现代构建工具使用</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import Versions from '../components/Versions.vue'

const router = useRouter()

/**
 * IPC 通信测试
 */
const handleIPC = (): void => {
  window.electron.ipcRenderer.send('ping')
  console.log('IPC 消息已发送')
}

/**
 * 打开文件管理页面
 */
const openFileManager = () => {
  router.push('/file-manager')
}

/**
 * 创建新窗口
 */
const createWindow = async () => {
  try {
    const result = await window.api.window.createChild({
      title: `子窗口 - ${new Date().toLocaleTimeString('zh-CN')}`
    })
    
    if (result.success) {
      console.log('子窗口创建成功:', result.windowId)
    } else {
      console.error('子窗口创建失败:', result.error)
    }
  } catch (error) {
    console.error('创建窗口出错:', error)
  }
}
</script>

<style scoped>
.welcome-page {
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

.hero-section {
  text-align: center;
  margin-bottom: 60px;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em var(--primary-color, #646cffaa));
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em var(--success-color, #42b883aa));
}

.hero-section h1 {
  font-size: 3.2em;
  line-height: 1.1;
  margin: 20px 0 10px 0;
  background: linear-gradient(45deg, var(--primary-color, #646cff), var(--success-color, #42b883));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 1.2em;
  color: var(--text-secondary, #666);
  margin: 0;
}

.tech-stack, .features, .version-section, .actions, .links {
  margin-bottom: 50px;
}

.tech-stack h2, .features h2, .actions h2, .links h2 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--text-primary, #2c3e50);
  font-size: 2em;
}

.stack-grid, .feature-grid, .link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.stack-item, .doc-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.stack-item:hover, .doc-link:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow, 0 10px 25px rgba(0, 0, 0, 0.1));
  background: var(--bg-primary, white);
  border: 1px solid var(--primary-color, transparent);
}

.stack-icon, .link-icon {
  font-size: 2em;
  min-width: 60px;
  text-align: center;
}

.stack-info h3, .link-info h3 {
  margin: 0 0 5px 0;
  color: var(--text-primary, #2c3e50);
}

.stack-info p, .link-info p {
  margin: 0;
  color: var(--text-secondary, #666);
  font-size: 0.9em;
}

.feature-card {
  background: var(--card-bg, white);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow-sm, 0 4px 15px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
  border: 2px solid var(--card-border, transparent);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow, 0 15px 35px rgba(0, 0, 0, 0.15));
  border-color: var(--primary-color, #646cff);
}

.feature-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.feature-card h3 {
  margin: 15px 0 10px 0;
  color: var(--text-primary, #2c3e50);
  font-size: 1.3em;
}

.feature-card p {
  color: var(--text-secondary, #666);
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-link {
  color: var(--primary-color, #646cff);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.feature-link:hover {
  color: var(--primary-hover, #42b883);
}

.version-section {
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-color, transparent);
  border-radius: 12px;
  padding: 30px;
}

.action-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 160px;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow, 0 8px 20px rgba(0, 0, 0, 0.15));
}

.action-btn.primary {
  background: linear-gradient(45deg, var(--primary-color, #646cff), var(--primary-hover, #5856eb));
  color: var(--text-inverse, white);
  border: 1px solid var(--primary-color, transparent);
}

.action-btn.secondary {
  background: linear-gradient(45deg, var(--success-color, #42b883), var(--success-hover, #369870));
  color: var(--text-inverse, white);
  border: 1px solid var(--success-color, transparent);
}

.action-btn.success {
  background: linear-gradient(45deg, var(--info-color, #28a745), var(--success-color, #20c997));
  color: var(--text-inverse, white);
  border: 1px solid var(--info-color, transparent);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-page {
    padding: 20px 15px;
  }
  
  .hero-section h1 {
    font-size: 2.5em;
  }
  
  .stack-grid, .feature-grid, .link-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .hero-section h1 {
    font-size: 2em;
  }
  
  .subtitle {
    font-size: 1em;
  }
  
  .logo {
    height: 4em;
    padding: 1em;
  }
}
</style>
